
<html>
<head>
<title>BandSmash</title>
	<style type="text/css">
      #metal_rcorner{
	    background-position: -0px -0px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90x;
		height: 100px;
		}
	
	#metal_3right{
	    background-position: -180px -0px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat: no-repeat;
		width: 90px;
		height: 100px;
		}
	
	#metal_rbottom{
	    background-position: -90px -0px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_middle1{
	    background-position: -0px -100px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_middle2{
	    background-position: -90px -100px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_middle3{
	    background-position: -180px -100px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_lcorner{
	    background-position: -0px -200px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_lbottom{
	    background-position: -90px -200px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_2left{
	    background-position: -180px -200px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_2t{
	    background-position: -270px -0px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_23{
	    background-position: -270px -100px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
		
	#metal_2l{
	    background-position: -270px -200px;
		background-image: url("http://i119.photobucket.com/albums/o154/rockenzer/metallica-g.jpg");
		background-repeat:no-repeat;
		width: 90px;
		height: 100px;
		}
	  </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">


    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('search', '1');

    var artist= "Metallica";
	
      
      google.setOnLoadCallback(OnLoad, true);
	
	
	function selectCover() {
		artist= document.getElementById("albums").value;
		ablumCoverSearch(artist);
		
		}
		
	function ablumCoverSearch(word) {
		var searcher = new GimageSearch();
			searcher.setResultSetSize(GSearch.LARGE_RESULTSET);
			searcher.execute(word);
			searcher.setSearchCompleteCallback(this, function() {
			document.getElementById("hint").innerHTML = "";
    for (var i = 0; i < searcher.results.length; i++) {
		createImage(searcher.results[i]);
   }
 });
}

function createImage(result) {
	var scaled = GSearch.scaleImage(result.tbWidth, result.tbHeight,{width:68,height:51});
	var img = document.createElement("img");
	img.setAttribute("src", result.tbUrl);
	img.setAttribute("width", 100);
	img.setAttribute("height", 100);
	img.style.padding = "5px";
	document.getElementById("hint").appendChild(img);
	img.onclick = function() {
		document.getElementById("metal_lbottom").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_middle1").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_rbottom").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_rcorner").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_2left").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_middle2").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_middle3").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_3right").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_2l").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_2t").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_23").style.backgroundImage = 'url("' + result.url + '")';
		document.getElementById("metal_lcorner").style.backgroundImage = 'url("' + result.url + '")';
	}
}

	
function OnLoad() {
	  ablumCoverSearch("Metallica");
        
     }


  function clicky() {
    var artist = document.getElementById("artist").value;
	var song = document.getElementById("song").value;
	var searchQuery = artist + " " + song;
    var script = document.createElement("script");
    var url = "http://gdata.youtube.com/feeds/api/videos?vq=" + encodeURIComponent(searchQuery) + "&alt=json-in-script&callback=myCallbackFunction&format=5&max-results=1";
    script.src = url;
	document.body.appendChild(script);
  }
  
    function clicky2() {
    var artist = document.getElementById("artist").value;
	var songValue = document.getElementById("song").value;
	var searchQuery = artist + " " + song;
    var script = document.createElement("script");
    var url = "http://lyricwiki.org/api.php?artist=" + encodeURIComponent(artist) + "&song=" + encodeURIComponent(songValue) + "&fmt=json";
    script.src = url;
	script.onload = function() {
	  var words = song.lyrics;
	  document.getElementById("poopy").innerHTML = words;
	  initialize(words);
	}
	document.body.appendChild(script);
  }
  function myCallbackFunction(root) {
    var feed = root.feed;
  var entry = feed.entry[0];
  var id = entry.id.$t.slice(-11);
 
  document.getElementById("agenda").innerHTML = '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/' + id + '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/' + id +'&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>'; 
	}
	google.load("language", "1");

    function initialize(text) {
	  text = text.substr(0,500);
      google.language.detect(text, function(result) {
	    console.log(result);
        if (!result.error && result.language) {
          google.language.translate(text, result.language, "en",
                                    function(result) {
            var translated = document.getElementById("herewego");
            if (result.translation) {
              translated.innerHTML = result.translation;
			  console.log(result.translation);
            }
          });
        }
      });
    }

  </script>
</head>
	<div id="logo1" style="z-index: 1; position: relative; border-color: #00EE00; border-width: 1px; border-style: solid; width: 770px; padding: 2px; margin-left: 100px;">
	<div id="logo2" style="z-index: 2; position: relative; border-color: #000080; border-style: solid; border-width: 1px; width: 760px; padding: 2px;">
	<div id="logo3" style="z-index: 3; position: relative; border-color: #2F2F4F; border-style: solid; border-width: 3px; width: 750px; padding: 2px;">
	<img src="Purple Goobers Logo.jpg" alt="Purple Goobers">
	<a href="BioPage.html">Bios</a>
	</div>
	</div>
	</div><br/>

	<div id="logo1" style="z-index: 1; position: relative; border-color: #00EE00; border-width: 1px; border-style: solid; width: 770px; padding: 2px; margin-left: 100px;">
	<div id="logo2" style="z-index: 2; position: relative; border-color: #000080; border-style: solid; border-width: 1px; width: 760px; padding: 2px;">
	<div id="logo3" style="z-index: 3; position: relative; border-color: #2F2F4F; border-style: solid; border-width: 3px; width: 750px; padding: 2px;">
	</div>
	</div>
	</div><br/>
	
<body style="background-color: #000000; color: #FFFFFF;">
<div id="div1" style="z-index: 1; position: relative; border-color: #00EE00; border-width: 1px; border-style: solid; padding: 2px; margin-left: 100px; width: 770px">
<div id="div2" style="z-index: 2; position: relative; border-color: #000080; border-style: solid; border-width: 1px; padding: 2px; width: 760px">
<div id="div3" style="text-align: center; font-family: fantasy; font-size: 120%; z-index: 3; position: relative; border-color: #2F2F4F; border-width: 3px; border-style: solid; padding: 2px; width: 750px">
<p>Artist Name>>><input style="background-color: #000000; color: #FFFFFF" type="text" id="artist" value="Juanes"/>      Song>>><input style="background-color: #000000; color: #FFFFFF" type = "text" id ="song" value="La Camisa Negra"/></p>
<input type="button" onclick="clicky(); clicky2();" value="Search"/>
<div id="agenda"></div><br/>
<textarea id="poopy" style="color: #FFFFFF; background-color: #000000; width: 300px; height: 400px">
</textarea>
<textarea id="herewego" style="color: #FFFFFF; background-color: #000000; width: 300px; height:400px"></textarea>
</div></div></div>
<br/>
<div id="div4" style="z-index: 1; position: relative; border-color: 00EE00; border-width: 1px; border-style: solid; padding: 2px; margin-left: 100px; width: 770px">
<div id="div5" style="z-index: 2; position: relative; border-color: #000080; border-style: solid; border-width: 1px; padding: 2px; width: 760px">
<div id="div6" style="text-align: center; font-family: fantasy; font-size: 120%; z-index: 3; position: relative; border-color: #2F2F4F; border-width: 3px; border-style: solid; padding: 2px; width: 750px">
 <table>
	<tr>
		<td class= "gsc-input">
		<input class="gsc-input" id="albums" type="text" name="search" title="search"/>
		</td>
		<td class= "button">

		<input class"button" type= "Submit" value="Album Search" title= "Research" onClick="selectCover()"></button>
		</td>

		</tr>
</div>
	 <div id="hint"></div>
    </table>
	<br><br><br>
<table>
		<tr>
		  <td><div id="metal_lbottom"></div></td>
		  <td><div id="metal_middle1"></div></td>
		  <td><div id="metal_2left"></div></td>
		  <td><div id="metal_rbottom"></div></td>
		</tr>
		<tr>
		  <td><div id="metal_middle3"></div></td>
		  <td><div id="metal_2l"></div></td>
		  <td><div id="metal_3right"></div></td>
		  <td><div id="metal_rcorner"></div></td>
		</tr>
		<tr>
		  <td><div id="metal_lcorner"></div></td>
		  <td><div id="metal_23"></div></td>
		  <td><div id="metal_middle2"></div></td>
		  <td><div id="metal_2t"></div></td>
		</tr>
		</table>
</div></div></div>

<div style="z-index: 1; position: relative; border-color: 00EE00; border-width: 1px; border-style: solid; padding: 2px; margin-left: 100px; width: 770px">
<div style="z-index: 2; position: relative; border-color: #000080; border-style: solid; border-width: 1px; padding: 2px; width: 760px">
<div id = "map" style="text-align: center; font-family: fantasy; font-size: 120%; z-index: 3; position: relative; border-color: #2F2F4F; border-width: 3px; border-style: solid; padding: 2px; width: 750px">
</div></div></div>
</body>

</html>